<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column align="center" label="个人绩效总成绩1">
        <el-table-column align="center" label="90%">
          <el-table-column
            align="center"
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            align="center"
            prop="month"
            label="查询时间（可选月份）">
          </el-table-column>
          <el-table-column
            align="center"
            prop="morality"
            label="职业道德总分">
          </el-table-column>
          <el-table-column
            align="center"
            prop="ability"
            label="职业能力总分">
          </el-table-column>
          <el-table-column
            align="center"
            prop="performance"
            label="工作表现总分">
          </el-table-column>
          <el-table-column
            align="center"
            prop="results"
            label="工作业绩总分">
          </el-table-column>
          <el-table-column
            align="center"
            prop="contribution"
            label="突出贡献总分">
          </el-table-column>
          <el-table-column
            align="center"
            prop="contribution"
            label="一票否决情况">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="10%">
          <el-table-column align="center" label="民主测评">
            <el-table-column
              align="center"
              prop="self-assessment"
              label="自评">
            </el-table-column>
            <el-table-column
              prop="peer-assessment"
              align="center"
              label="他评">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="100%">
          <el-table-column
            align="center"
            prop="peer-assessment"
            label="月度总分">
          </el-table-column>
        </el-table-column>
        <el-table-column>
          <el-table-column
            align="center"
            prop="peer-assessment"
            label="组内排名">
          </el-table-column>
        </el-table-column>
        <el-table-column>
          <el-table-column
            align="center"
            prop="peer-assessment"
            label="绩效激励工资扣款（占绩效工资30%）">
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button type="primary" size="mini" @click="handleDetails(row)">扣分详情
            </el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
    import { fetchList, fetchPersonalSummary, fetchPv, createArticle, updateArticle } from '@/api/article'
    import waves from '@/directive/waves' // waves directive
    import { parseTime } from '@/utils'
    import Pagination from '@/components/Pagination' // secondary package based on el-pagination
    import Cookies from 'js-cookie'

    export default {
        name: 'ComplexTable',
        components: { Pagination },
        directives: { waves },
        data() {
            return {
                list: null,
                total: 0,
                listLoading: false,
                monthOptions: ["2021年1月", "2021年2月", "2021年3月"],
                listQuery: {
                    page: 1,
                    limit: 20,
                    importance: undefined,
                    name: undefined,
                    grade: undefined,
                    class: undefined,
                    sort: '+id'
                },
                listQ: {
                    "stage_num":"2021a",
                    "effect_time_start":"2020-01-01",
                    "effect_time_end":"2020-04-01",
                    "userId":"13246678667"
                },
                temp: {
                    id: undefined,
                    importance: 1,
                    remark: '',
                    timestamp: new Date(),
                    title: '',
                    type: '',
                    status: 'published'
                },
                rules: {
                    type: [{ required: true, message: 'type is required', trigger: 'change' }],
                    timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
                    title: [{ required: true, message: 'title is required', trigger: 'blur' }]
                },
                tableData: [
                    {
                        'name' : '赵志超',
                        'month' : '2021年1月',
                        'morality' : 100,
                        'ability' : 100,
                        'performance' : 100,
                        'results' : 100,
                        'contribution' : 100,
                        'self-assessment' : 100,
                        'peer-assessment' : 100,
                    },{
                        'name' : '赵志超',
                        'month' : '2021年2月',
                        'morality' : 100,
                        'ability' : 100,
                        'performance' : 100,
                        'results' : 100,
                        'contribution' : 100,
                        'self-assessment' : 100,
                        'peer-assessment' : 100,
                    },{
                        'name' : '赵志超',
                        'month' : '2021年3月',
                        'morality' : 100,
                        'ability' : 100,
                        'performance' : 100,
                        'results' : 100,
                        'contribution' : 100,
                        'self-assessment' : 100,
                        'peer-assessment' : 100,
                    },{
                        'name' : '赵志超',
                        'month' : '2021年4月',
                        'morality' : 100,
                        'ability' : 100,
                        'performance' : 100,
                        'results' : 100,
                        'contribution' : 100,
                        'self-assessment' : 100,
                        'peer-assessment' : 100,
                    },{
                        'name' : '赵志超',
                        'month' : '2021年5月',
                        'morality' : 100,
                        'ability' : 100,
                        'performance' : 100,
                        'results' : 100,
                        'contribution' : 100,
                        'self-assessment' : 100,
                        'peer-assessment' : 100,
                    },
                ]
            }
        },
        created() {
            // this.getList()
        },
        methods: {
            headStyle(){
                return "text-align:center"
            },
            getList() {
                this.listLoading = true
                fetchList(this.listQ).then(response => {
                    this.list = response.data.items
                    this.total = response.data.total

                    // Just to simulate the time of the request
                    setTimeout(() => {
                        this.listLoading = false
                    }, 1.5 * 1000)
                })
            },
            getTable() {
                fetchPersonalSummary(this.listQ).then(response => {
                    console.log(response.data)
                    this.dialogStatus = 'update'
                    this.dialogFormVisible = true
                    var personalSummaryData = new Array()
                    for(let key in response.data){
                        let params = {
                            'month' : key,
                            'morality' : response.data[key]['职业道德'],
                            'ability' : response.data[key]['职业能力'],
                        }
                        personalSummaryData.push(params)
                    }
                    console.log(personalSummaryData)
                    this.tableData = personalSummaryData
                    this.$router.push({ path: '/personal-menu/personal_info' })
                })
            },
            handleFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            sortChange(data) {
                const { prop, order } = data
                if (prop === 'id') {
                    this.sortByID(order)
                }
            },
            sortByID(order) {
                if (order === 'ascending') {
                    this.listQuery.sort = '+id'
                } else {
                    this.listQuery.sort = '-id'
                }
                this.handleFilter()
            },
            resetTemp() {
                this.temp = {
                    id: undefined,
                    importance: 1,
                    remark: '',
                    timestamp: new Date(),
                    title: '',
                    status: 'published',
                    type: ''
                }
            },
            createData() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
                        this.temp.author = 'vue-element-admin'
                        createArticle(this.temp).then(() => {
                            this.list.unshift(this.temp)
                            this.dialogFormVisible = false
                            this.$notify({
                                title: 'Success',
                                message: 'Created Successfully',
                                type: 'success',
                                duration: 2000
                            })
                        })
                    }
                })
            },
            handleDetails(row) {
                // fetchPersonalSummary(this.listQ).then(response => {
                //   console.log(response.data)
                //   this.dialogStatus = 'update'
                //   this.dialogFormVisible = true
                //   var personalSummaryData = new Array()
                //   for(let key in response.data){
                //     let params = {
                //       'month' : key,
                //       'morality' : response.data[key]['职业道德'],
                //       'ability' : response.data[key]['职业能力'],
                //     }
                //     personalSummaryData.push(params)
                //   }
                //   console.log(personalSummaryData)
                //   this.tableData = personalSummaryData
                // })
                this.$router.replace('/personal_menu/personal_score')
            },
            handleMonthDetails(row) {
                console.log(row)
            },
            updateData() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        const tempData = Object.assign({}, this.temp)
                        tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
                        updateArticle(tempData).then(() => {
                            const index = this.list.findIndex(v => v.id === this.temp.id)
                            this.list.splice(index, 1, this.temp)
                            this.dialogFormVisible = false
                            this.$notify({
                                title: 'Success',
                                message: 'Update Successfully',
                                type: 'success',
                                duration: 2000
                            })
                        })
                    }
                })
            },
            formatJson(filterVal) {
                return this.list.map(v => filterVal.map(j => {
                    if (j === 'timestamp') {
                        return parseTime(v[j])
                    } else {
                        return v[j]
                    }
                }))
            },
            getSortClass: function(key) {
                const sort = this.listQuery.sort
                return sort === `+${key}` ? 'ascending' : 'descending'
            }
        }
    }
</script>
